<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/layui/css/layui.css"  media="all">

</head>
<body>
    <form class="layui-form" action="">
        <div class="" style="margin: 30px 0 0 20px;">
            <label class="layui-form-label">选择物品：</label>
            <div id="selectBox" class="layui-input-inline">
                <select id="aa" name="modules" lay-verify="required" lay-search="" lay-filter="test1">
                    <option th:each="item:${data}" th:value="${item.id}" >[[${item.title}]]</option>
                </select>
            </div>
        </div>
        <div class="layui-inline" style="margin: 30px 0 0 20px;">
            <label class="layui-form-label">所需物品1：</label>
            <div id="selectBox" class="layui-input-inline">
                <select id="aa1" name="modules" lay-verify="required" lay-search="" lay-filter="test2">
                    <option th:each="item:${data}" th:value="${item.id}" >[[${item.title}]]</option>
                </select>
            </div>
        </div>
        <div class="layui-inline" style="margin: 30px 0 0 20px;">
            <label class="layui-form-label">所需物品2：</label>
            <div id="selectBox" class="layui-input-inline">
                <select id="aa2" name="modules" lay-verify="required" lay-search="" lay-filter="test2">
                    <option th:each="item:${data}" th:value="${item.id}" >[[${item.title}]]</option>
                </select>
            </div>
        </div>
        <div class="layui-inline" style="margin: 30px 0 0 20px;">
            <label class="layui-form-label">所需物品3：</label>
            <div id="selectBox" class="layui-input-inline">
                <select id="aa3" name="modules" lay-verify="required" lay-search="" lay-filter="test2">
                    <option th:each="item:${data}" th:value="${item.id}" >[[${item.title}]]</option>
                </select>
            </div>
        </div>
        <div class="layui-inline" style="margin: 30px 0 0 20px;">
            <label class="layui-form-label">所需物品4：</label>
            <div id="selectBox" class="layui-input-inline">
                <select id="aa4" name="modules" lay-verify="required" lay-search="" lay-filter="test2">
                    <option th:each="item:${data}" th:value="${item.id}" >[[${item.title}]]</option>
                </select>
            </div>
        </div>
        <div class="layui-inline" style="margin: 30px 0 0 20px;">
            <label class="layui-form-label">所需物品5：</label>
            <div id="selectBox" class="layui-input-inline">
                <select id="aa5" name="modules" lay-verify="required" lay-search="" lay-filter="test2">
                    <option th:each="item:${data}" th:value="${item.id}" >[[${item.title}]]</option>
                </select>
            </div>
        </div>
        <div style="margin-left: 50px;">
            <button id="save" type="button" class="layui-btn layui-btn-normal">保存</button>

        </div>
    </form>

    <script src="/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="/layui/layui.js" type="text/javascript" charset="utf-8"></script>
    <script>
        layui.use(['form','element'], function() {
            var element = layui.element;
            var form = layui.form;
            form.render();
            var resourceId=0;
            form.on('select(test1)', function(data){
                resourceId=data.value;
            });
            $("#save").click(function () {
                var aa1 = $("#aa1").val();
                var aa2 = $("#aa2").val();
                var aa3 = $("#aa3").val();
                var aa4 = $("#aa4").val();
                var aa5 = $("#aa5").val();
                var relationVos=[];
                if(aa1!=1){
                    var relationVo1={
                        resourceId:"",
                        requireResourceId:aa1
                    };
                    relationVos.push(relationVo1);
                }
                if(aa2!=1){
                    var relationVo2={
                        resourceId:"",
                        requireResourceId:aa2
                    };
                    relationVos.push(relationVo2);
                }
                if(aa3!=1){
                    var relationVo3={
                        resourceId:"",
                        requireResourceId:aa3
                    };
                    relationVos.push(relationVo3);
                }
                if(aa4!=1){
                    var relationVo4={
                        resourceId:"",
                        requireResourceId:aa4
                    };
                    relationVos.push(relationVo4);
                }
                if(aa5!=1){
                    var relationVo5={
                        resourceId:"",
                        requireResourceId:aa5
                    };
                    relationVos.push(relationVo5);
                }

                $.ajax({
                    url:"/resources/update?resourceId="+resourceId,
                    type:"post",
                    data:JSON.stringify(relationVos),
                    contentType:"application/json",
                    success:function (data) {
                        alert(data.msg);
                    }
                });
            })
        });

    </script>
</body>
</html>